<template>
  <div class="share-body">
    <div class="share-mask" @click="close_share_btn"></div>
    <div class="content" v-if="showCode">
      <qrcode class="code_style" :value="portalWebsiteUrl" v-if="portalWebsiteUrl" :options="{ size: 100 }"></qrcode>
      <p class="scan">扫一扫识别二维码</p>
    </div>
    <div class="share-box" v-else>
      <h2 class="share-title">分享<em @click="close_share_btn" class="iconfont">&#xe62d;</em></h2>
      <ul class="share_ul">
        <li @click="code_btn">
          <em class="iconfont">&#xe629;</em>
          <span>二维码</span>
        </li>
        <li @click="friends_btn">
          <em class="iconfont">&#xf01b0;</em>
          <span>朋友圈</span>
        </li>
        <li @click="weChat_btn">
          <em class="iconfont">&#xe602;</em>
          <span>微信</span>
        </li>
        <li @click="qq_btn">
          <em class="iconfont">&#xf01c7;</em>
          <span>QQ</span>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import qrcode from 'vue-qrcode';
  import { Toast } from 'mint-ui'; //引入弹框
  export default {
    components: { qrcode },
    name: 'hello',
    data () {
      return {
        portalWebsiteUrl:"",  //存储推广路径
        showCode:false,   //二维码显示
        wxConfig: null,
      }
    },

    props: ['shareShow'],   //接收父级传值

    methods:{

      //点击关闭分享框
      close_share_btn(){
        this.showCode = false;
        this.$emit("closeShowBtn","");
      },

      //查询推广路径
      portal_website_queryAgentAccountUrl(){
        this.axios({
          method: 'GET',
          url: "/v3/portal/websites/queryAgentAccountUrl",
        }).then((res) => {
          this.portalWebsiteUrl = res.data;
        }).catch((err)=>{
          Toast({
            message: err.response.data,
            iconClass: 'fontSize iconfont icon-shibai'
          });
        });
      },

      //点击显示二维码
      code_btn(){
        this.portal_website_queryAgentAccountUrl();
        if(this.portalWebsiteUrl){
          this.showCode = true;
        }
      },

      //点击分享朋友圈
      friends_btn(){
      	this.weixinShare();
        this.portal_website_queryAgentAccountUrl();
        if(this.portalWebsiteUrl){
          this.showCode = true;
        }
      },

      //点击分享微信
      weChat_btn(){

      },

      //点击分享QQ
      qq_btn(){

      },

      //获取公共配置
      getCommonCofig(){
      	this.axios({
          method: 'POST',
          url: "/v3//weixin/users/loadWeixinConfig",
        }).then((res) => {
          this.wxConfig = res.data;
          wx.config({
            debug: false,
            appId: wxConfig.appId,
            timestamp: wxConfig.timestamp,
            nonceStr: wxConfig.nonceStr,
            signature: wxConfig.signature,
            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'chooseImage','uploadImage','startRecord', 'stopRecord', 'onVoiceRecordEnd', 'playVoice', 'pauseVoice', 'stopVoice']
           });
        }).catch((err)=>{
          Toast({
            message: err.response.data,
            iconClass: 'fontSize iconfont icon-shibai'
          });
        });
      }
    },

    //微信分享
    weixinShare(){
    	wx.ready(function(){
    		wx.onMenuShareTimeline({
			    title: '', // 分享标题
			    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			    imgUrl: '', // 分享图标
			    success: function () {
			        // 用户确认分享后执行的回调函数
			    },
			    cancel: function () {
			        // 用户取消分享后执行的回调函数
			    }
			  });
		  });
    },

    mounted(){},
  }
</script>

<style scoped>

  .scan{
    text-align: center;
  }

  .code_style{
    display: block;
    margin: 35px auto 20px;
  }

  .content{
    background: white;
    width: 200px;
    height: 200px;
    margin-top: -100px;
    margin-left:-100px;
    top: 50%;
    left: 50%;
    position: fixed;
    z-index: 200;
  }


  .share_ul li span{
   font-size: 12px;
  }

  .share_ul li em{
    display: block;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background: #444;
    color: white;
    margin: 0 auto 6px;
    font-size: 20px;
  }

  .share_ul li{
    width: 20%;
    float: left;
    text-align: center;
  }

  .share_ul{
    overflow: hidden;
  }

  .share-title em{
    position: absolute;
    right: 0;

  }

  .share-title{
    font-weight: normal;
    text-align: center;
    position: relative;
    font-size: 18px;
    margin-bottom: 16px;
  }

  .share-mask{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    position: fixed;
    top: 0;
    left: 0;
    z-index:101;
  }

  .share-box{
    border-top: 1px #dddddd solid;
    width: 100%;
    height: 160px;
    background: white!important;
    padding: 10px 20px 10px;
    z-index: 333333;
    position: fixed;
    bottom: 0;
    left: 0;
  }
</style>
